<template>
  <div>
    <el-form :inline="true" :model="spuSearchDto" ref="searchRef">
      <el-form-item label="分类" prop="categoryId">
        <el-cascader v-model="spuSearchDto.categoryId" :options="allCategoryList" @visible-change="getCategoryList"
                     :props="cascaderProps"/>
      </el-form-item>
      <el-form-item label="品牌" prop="brandId">
        <el-select v-model="spuSearchDto.brandId" class="m-2" placeholder="Select"
                   @visible-change="getBrandList" :disabled="spuSearchDto.categoryId.length==0">
          <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.brandName"
              :value="item.brandId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="spuSearchDto.state" class="m-2" placeholder="Select">
          <el-option
              label="已上架"
              value="0"
          />
          <el-option
              label="未上架"
              value="1"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检索" prop="serachValue">
        <el-input v-model="spuSearchDto.searchValue"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="spuSearch">搜索</el-button>
    <el-button @click="searchRef.resetFields()" type="primary">重置</el-button>
  </div>
  <div>
    <el-table :data="spuLst" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="编号"/>
      <el-table-column prop="spuName" label="名称"/>
      <el-table-column prop="spuDescription" label="描述"/>
      <el-table-column prop="categoryId" label="分类"/>
      <el-table-column prop="brandId" label="品牌"/>
      <el-table-column prop="weight" label="重量(kg)"/>
      <el-table-column label="上架状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.state==0">已上架</el-tag>
          <el-tag type="danger" v-else-if="scope.row.state==1">未上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="updateTime" label="更新时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text type="primary" @click="oepnToUp(scope.row.id)" v-if="menuCodes.indexOf('goods-up')!=-1">上架
          </el-text>
          <el-divider direction="vertical"/>
          <el-text type="primary">规格</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[3,5,8]"
        background
        layout="sizes, prev, pager, next"
        :total="pageInfo.totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {getSpuList, goodsUp} from '@/api/home/goods/goods'
import {getBrandByCatgoryId} from '@/api/home/brand/brand'
import {getAllCategoryToTree} from "@/api/home/goods/category";
import {ElMessage, ElMessageBox} from 'element-plus'
import {useMenusStore} from "@/store/permission";
import {storeToRefs} from 'pinia'

let store = useMenusStore()
let {menuCodes} = storeToRefs(store)
let spuLst = ref([])
let loading = ref(true)
let allCategoryList = ref([])
let brandList = ref([])
let searchRef = ref()
let spuSearchDto = reactive({
  categoryId: '',
  brandId: '',
  searchValue: '',
  state: ''
})
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false
}
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 5,
  totals: Number
})

function getCategoryList() {
  getAllCategoryToTree().then(res => {
    allCategoryList.value = res.data
  })
}

function getBrandList() {
  getBrandByCatgoryId(spuSearchDto.categoryId).then((res) => {
    brandList.value = res.data
  })
}

function getSpus(pageNum, pageSize, dto) {
  getSpuList(pageNum, pageSize, dto).then(res => {
    spuLst.value = res.data.records
    pageInfo.totals = res.data.total - 0
    loading.value = false
  })
}

function oepnToUp(spuId) {
  ElMessageBox.confirm(
      '你确定将该商品修改为上架状态吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        /*发送上架请求*/
        goodsUp(spuId)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功',
        })
      })
}

function spuSearch() {
  getSpus(pageInfo.pageNum, pageInfo.pageSize, spuSearchDto)
}

onMounted(() => {
  try {
    getSpus(0, 10, spuSearchDto)
  }
  catch (e){
    ElMessage.error("报错了，看一下控制台")
    console.log("报错了",e)
  }
})
watch([() => pageInfo.pageNum,()=>pageInfo.pageSize], () => {
  spuSearch()
})
</script>
<style scoped>

</style>
